<template>
	<view>
		<mysearch></mysearch>
		<view class="scrollwrap">
			<scroll-view scroll-y="true" class="scrollleft">
				<!-- 一级分类 -->
				<view class="leftitem" @tap="change(index)" :class="index == ind ? 'active' : ''"
				v-for="item,index in catelist" :key="item.cat_id">
					{{item.cat_name}}
				</view>
			</scroll-view>
			<scroll-view scroll-y="true" class="scrollright">
				<view v-for="item in result" :key="item.cat_id">
					<!-- 二级分类 -->
					<view class="cattitle">{{item.cat_name}}</view>
					<!-- 三级分类 -->
					<view class="catchild">
						<view class="childitem" @tap="goto" v-for="ele in item.children" :key="ele.cat_id">
							<image class="img" :src="ele.cat_icon" ></image>
							<text class="nameitem">{{ele.cat_name}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

	</view>
</template>

<script>
	import {
		getCate
	} from '../../utils/http.js'
	export default {
		data() {
			return {
				catelist:[], // 所有分类
				ind:0, // 默认下标
				result:[], //右边展示的二级和三级分类
			}
		},
		methods: {
			change(index){
				this.ind = index
				this.result = this.catelist[index].children;
				console.log(this.result);
			},
			goto(){
				uni.navigateTo({
					url:"/pages-other/goodslist/goodslist"
				})
			}
		},
		onLoad() {
			// 请求分类数据

			getCate().then(res => {
				console.log(res);
				this.catelist = res.data.message
				this.result = this.catelist[this.ind].children;

			})
		}
	}
</script>

<style lang="scss">
.scrollwrap{
	display: flex;
	.scrollleft{
		flex: 3;
		height: 78vh;
		.leftitem{
			width: 100%;
			padding: 30rpx 0;
			text-align: center;
			border-left: 8rpx solid transparent;
		}
		.active{
			background-color: #fff;
			border-color: #c00;
		}
	}
	.scrollright{
		background-color: #fff;
		flex: 7;
		height: 78vh;
		.cattitle{
			text-align: center;
			font-size: 40rpx;
			margin: 20rpx;
		}
		.catchild{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			width: 100%;
			.childitem{
				width: 33%;
				box-sizing: border-box;
				padding: 40rpx 24rpx;
				.img{
					width: 100%;
					height: 100rpx;
				}
				.nameitem{
					display: inline-block;
					width: 100%;
					text-align: center;
				}
			}
			
		}
	}
}
</style>
